<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>the draft2</title>
  <style type="text/css" id="d_style">
	*{margin:0;padding:0;}
	body{font-size:12px;font-family:"微软雅黑";background:#63666f;}
	/* draft_top */
	.d_top{height:70px;}
	.d_top > .d_top_c{}
	.d_top > .d_top_c > div:nth-child(1) {float: left; margin: 25px;}
	.d_top > .d_top_c > div:nth-child(2) {width: 50%; text-align: center; margin: auto;}
	.d_top > .d_top_c > div:nth-child(2) p {font-size: 63px; text-shadow: 0 0 10px #f3cc0e;}
	.d_top > .d_top_c > div:nth-child(3) {float: right; margin: -57px 30px;}

	/* draft_body */
	.d_body{width: 1522px; position: absolute; height: 608px; margin-top: 72px; margin-left: 14px;}
	#gobt{float:left;}
    /*S-输入代码区*/
	.d_body > .code_draft{z-index: 7; position: absolute; background: #fff ; width: 582px; height: 603px; border: 1px solid #d6d3d3; line-height: 27px; border-radius: 5px; font-size: 14px;}
    .d_body > .code_draft > ul{width: 300px; height: 30px; text-align: center; position: absolute;}
	.d_body > .code_draft > ul > li {cursor:pointer;list-style-type:none;width:98px;height:30px;float:left;}
    .d_body > .code_draft > .draftarea{width: 562px; height: 551px; border: 1px solid #ccc; border-radius: 5px; display: none; position: absolute; margin-top: 33px; padding: 9px; font-size: 14px; background: #f4f7e2; font-family: "sans-serif"; outline: none;}
    /*E-输入代码区*/
    /*显示区*/
	.d_body > .draftshow{width: 915px; height: 604px; border: 1px solid #d6d3d3; background: #f4f7e2; font-size: 14px; font-family: "sans-serif"; border-radius: 5px; position: absolute;  margin-left: 601px;}
  </style>
 </head>
 <body>
	<div id="box" style="margin: auto; width:1547px;height:772px;border:8px solid #000;border-radius:19px 19px 19px 19px;">
		<!--draft_top-->
		<div class="d_top">
			<div class="d_top_c">
				<div>
					<a href="../html.html" target="_blank">
						<img src="../img/06.png" title="返回主页"/>
					</a>
				</div>
				<div> 
					<p>
						D&nbsp;&nbsp;R&nbsp;&nbsp;A&nbsp;&nbsp;F&nbsp;&nbsp;T
					</p>
				</div>
				<div style="">
					<a href="#">
						<img src="../img/07.png" alt="保存" title="保存"/>
					</a>
				</div>
			</div>
		</div>
		<!--draft_body-->
		<div class="d_body">
			<!--S-输入代码区-->
			<div class="code_draft">
				<ul class="code_draft_ul">
					<li>
						<a class="r_info_a">html</a>
					</li>
					<li>
						<a class="r_info_a">js</a>
					</li>
					<li>
						<a class="r_info_a">css</a>
					</li>
				</ul>
				<!--S-html-->
				<textarea class="draftarea" id="draftarea_html"></textarea>
				<!--E-html-->
				<!--S-js-->
				<textarea class="draftarea" id="draftarea_js"></textarea>
				<!--E-js-->
				<!--S—css-->
				<textarea class="draftarea" id="draftarea_css"></textarea>
				<!--E-css-->
			</div>
			<!--E-输入代码区-->
			<!--展示区-->
			<div class="draftshow" id="draftshow">
				<code id="draftcode"></code>
			</div>
			<!--展示区-->
		</div>
		<!--draft_body-->
	</div>
	<script src="../js/MyjsV0-8.js"></script>
	<script>
	SelectLi.extends(LiEventSuper);
	function SelectLi(data){
		LiEventSuper.call(this, data);
		this.overEventCss = function (i){
			data.liElements[i].css("background:#555; color:#fff;", false); 
		}
		//当前移出样式设置
		this.outEventCss = function (i){
			data.liElements[i].css("background:#fff; color:#555;", false); 
		}
		//e {i:preIndex}
		this.preClickFun = function (i){
			data.liElements[i].css("background:#fff; color:#555;", false);
			data.pages[i].style.display = "none";
		}
		//设置当前的元素 
		//e {i:i}
		this.nowClickFun = function (i){
			data.liElements[i].css("background:#555; color:#fff;", false);
			data.pages[i].style.display = "block";
		}
	}
	new SelectLi({
		liElements: $(".code_draft ul li"),
		pages: $(".code_draft textarea"), 
	}).doReady();
   
    
	</script>
 </body>
</html>
